// Learn TypeScript:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/typescript.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

const { ccclass, property } = cc._decorator;

@ccclass
export default class Hamburger extends cc.Component {
    @property({ visible: true })
    _width: number = 1;

    @property({ visible: true })
    _scale: number = 1;

    @property({ visible: true })
    _stroke_color: cc.Color = cc.Color.WHITE;

    @property({ visible: true })
    _fill_color: cc.Color = cc.Color.WHITE;

    //_param: string = "M41.659,13.625 C41.659,13.625 49.284,1.125 24.159,0.75 C-1.213,0.371 -0.257,14.208 3.659,16.375 C7.575,18.542 23.301,14.212 32.076,15.167 C44.325,16.5 45.909,23.416 45.909,23.416 C45.909,23.416 38.825,19.833 33.492,19.916 C28.159,19.999 28.992,22.083 28.992,22.083 C28.992,22.083 25.992,19.166 19.242,18.833 C9.071,18.331 6.242,23.917 6.242,23.917 C6.242,23.917 8.076,20.417 4.576,20.5 C1.076,20.583 -5.013,27.034 10.159,26.5 C26.742,25.916 16.288,23.024 31.742,25 C49.992,27.333 45.492,31.166 33.492,29.166 C21.492,27.166 11.909,29.5 5.034,31.375 C1.171,32.429 2.925,35.485 6.909,38.166 C11.492,41.25 10.91,30.25 21.576,31.333 C32.242,32.416 43.784,30.25 43.409,36.875 C43.07,42.865 15.784,43.125 9.784,41.875 C4.305,40.733 3.701,41.333 4.784,44.75 C5.867,48.167 9.034,50.125 22.409,50.25 C43.241,50.444 42.034,44.25 42.034,44.25";
    _param: string = "M0,0 C0,-300 300,-100 300,0";
    _path = null;
    _percent: number = 0;
    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this._path = this.addComponent("R.path");
        this._path.strokeColor = this._stroke_color;
        this._path.lineWidth = this._width;
        this._path.fillColor = "none";
        this._path.scale = new cc.Vec2(1, -1).mul(this._scale);

        this._path.path(this._param);
        this._path.center(320, 480);

        let length = this._path.getTotalLength();
        this._path.dashOffset = length;
        this._path.dashArray = [50,50,50,50,50];

        let percent = this._percent;
        this._percent = -1;
        this.progress(percent);

        this.node.on(cc.Node.EventType.TOUCH_START, this.on_touch_start, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.on_touch_end, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.on_touch_cancle, this);
    }

    start() {

    }

    update(dt) {
        if (this._percent >= 1) {
            return;
        }
        this.progress(this._percent + dt / 2);
    }

    on_touch_start(event: cc.Event.EventMouse) {
        let position = event.getLocation();
        position = this.node.convertToNodeSpace(position)

        this._path.center(position.x, position.y);
    }

    on_touch_move(event: cc.Event.EventTouch) {
        let position = event.getLocation();
        position = this.node.convertToNodeSpace(position)

        this._path.center(position.x, position.y);
    }

    on_touch_end(event: cc.Event.EventTouch) {

    }

    on_touch_cancle(event: cc.Event.EventTouch) {

    }

    progress(percent: number) {
        if (percent > 1) percent = 1;
        if (percent < 0) percent = 0;
        if (this._percent == percent) return;

        this._path.dashOffset = (1 - this._percent) * this._path.getTotalLength();
        this._percent = percent;
        this._path._dirty = true;
    }
}
